<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .stop-parent,
      .capture-parent,
      .self-parent {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 10px;
        height: 200px;
        background-color: #ccc;
      }
      .capture-child {
        width: 200px;
        height: 100px;
        background-color: orange;
      }
      .passive-parent {
        height: 200px;
        overflow: scroll;
        background-color: #ddd;
      }
      .passive-parent > li {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 阻止默认事件（常用） -->
      <a href="https://baidu.com/" @click.prevent="printMsg">百度一下</a>
      <!-- 阻止事件冒泡（常用） -->
      <div class="stop-parent" @click="printMsg('stop parent')">
        <button @click.stop="printMsg('stop button#1')">阻止冒泡</button>
        <button @click="printMsg('stop button#2')">不阻止冒泡</button>
        <!-- 修饰符可以连续写 -->
        <a
          href="https://www.jd.com/"
          @click.prevent.stop="printMsg('prevent stop a')"
        >
          京东
        </a>
      </div>
      <!-- 事件只触发一次（常用） -->
      <button @click.once="printMsg('once')">触发一次</button>
      <!-- 使用事件的捕获模式 -->
      <div class="capture-parent" @click.capture="printMsg('capture parent')">
        <div class="capture-child" @click="printMsg('capture child')"></div>
      </div>
      <!-- 只有event.target是当前操作的元素时才触发事件； -->
      <div class="self-parent" @click.self="printMsg">
        <button @click="printMsg('self child')">self child</button>
      </div>
      <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
      <ul @wheel.passive="passiveTest" class="passive-parent">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
      <!-- 不需要加上 passive 修饰，滚动条不受事件的影响 -->
      <ul @scroll="passiveTest" class="passive-parent">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const { createApp, ref } = Vue;

      const app = createApp({
        setup() {
          function printMsg(...args) {
            console.log(args);
          }

          function passiveTest() {
            // 如果鼠标滚动 wheel 事件不加 passive 修饰，它会等待回调执行完毕后再进行滚动，就会造成卡顿
            console.log("同步执行中...", +new Date());
            for (let i = 0; i < 2000000000; i++) {
              //   console.log(i);
            }
            console.log("同步完毕", +new Date());
          }

          return {
            printMsg,
            passiveTest,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
